import { useEffect, useState } from "react";
import ContactItems from "./ContactItems";
import './Contacts.css';
import { ContactContext } from "./context";
import { useContext } from "react";

const Contacts = (props) => {
    const [cls, setCls] = useState("contacts");
    const { page } = useContext(ContactContext);
    useEffect(() => {
        if (page === "ContactDetail") {
            setCls("contacts out");
        }
        if (page === "Contacts") {
            setCls("contacts");
        }
    }, [page])

    return <div className={cls}>
        <div className="header">
            <div className="top">
                <img className="icon left" src="./imgs/1.png" alt="1" />
                <span className="item title">Contacts</span>
                <img className="icon right" src="./imgs/2.png" alt="1" />

            </div>
            <div className="search-contact">
                <input placeholder="Search Contact" />
            </div>
        </div>
        <ContactItems />
    </div>
}

export default Contacts;